<template>
  <div class="register"
  :style="{'minHeight':winHei+'px'}">

    <div class="foemBoxBg">
      <ul class="formBox"> 
        <li>
          <div class="t">
            <b>*</b>
            <span>
              注册码
            </span>
          </div>
          <div class="b">
            <input type="text" v-model="zcCode" placeholder="请输入注册码">
          </div>
        </li>

        <li>
          <div class="t">
            <b>*</b>
            <span>
              账号
            </span>
          </div>
          <div class="b">
            <input type="text" v-model="u_account" placeholder="请输入6-12位账号">
          </div>
        </li>


        <li>
          <div class="t">
            <b>*</b>
            <span>
              密码
            </span>
          </div>
          <div class="b pwdInp">
            <input v-if="!u_pwd_see" type="password" v-model="u_pwd" placeholder="请输入6-12密码">
            <input v-else type="text" v-model="u_pwd" placeholder="请输入6-12密码">
            <div @click="setVal('u_pwd_see')" class="seeBox">
              <img v-show="!u_pwd_see" src="@/assets/img/login/see.png" alt="">
              <img v-show="u_pwd_see" src="@/assets/img/login/no_see.png" alt="">
            </div>
          </div>
        </li>


        <li>
          <div class="t">
            <b>*</b>
            <span>
              确认密码
            </span>
          </div>
          <div class="b pwdInp">
            <input v-if="!u_qr_pwd_see" type="password" v-model="u_qr_pwd" placeholder="请输入6-12密码">
            <input v-else type="text" v-model="u_qr_pwd" placeholder="请输入6-12密码">
            <div @click="setVal('u_qr_pwd_see')" class="seeBox">
              <img v-show="!u_qr_pwd_see" src="@/assets/img/login/see.png" alt="">
              <img v-show="u_qr_pwd_see" src="@/assets/img/login/no_see.png" alt="">
            </div>
          </div>
        </li>

        <li>
          <div class="loginBtn" @click="registerBtn">
            注册
          </div>
        </li>

      </ul>

      <ul class="txtBtn">
        <li>
          <span @click="goPage('/login')">
            返回登录
          </span>
        </li>
      </ul>

    </div>

  </div>
</template>

<script>
export default {
  name: 'Register',
  data(){
    return{
      zcCode:"",
      u_account:"",
      u_pwd:"",
      u_qr_pwd:"",
      u_pwd_see:false,
      u_qr_pwd_see:false 
    }
  },
  components: {

  },
  mounted() {
    let that=this;
    console.log("版本："+this.$version);
    window.localStorage.setItem("itemVersion",this.$version);
  },
  activated() {
    let that=this;
    that.zcCode="";
    that.u_account="";
    that.u_pwd="";
    that.u_qr_pwd="";
    that.u_pwd_see=false;
    that.u_qr_pwd_see=false;
  },
  methods:{
    setVal(val){
      let that=this;
      that[val]=!that[val];
    },
    registerBtn(){
      let that=this;
      if(that.zcCode==""||that.u_account==""||that.u_pwd==""||that.u_qr_pwd==""){
        if(that.zcCode==""){
          that.$bus.$emit("toastEvent","请填写注册码!",0);
        }else if(that.u_account==""){
          that.$bus.$emit("toastEvent","请填写账号!",0);
        }else if(that.u_pwd==""){
          that.$bus.$emit("toastEvent","请填写密码!",0);
        }else if(that.u_qr_pwd==""){
          that.$bus.$emit("toastEvent","请填写确认密码!",0);
        }

        if(that.zcCode==""&&that.u_account==""&&that.u_pwd==""&&that.u_qr_pwd==""){
          that.$bus.$emit("toastEvent","请把信息填写完整!",0);
        }

      }else{
        if(that.u_pwd!==that.u_qr_pwd){
          that.$bus.$emit("toastEvent","两处密码不一致!",0);
        }else{
          that.register_req();
        }
      }
    },
    register_req(){
      let that=this;
      this.$request.post(
           `/api/user/register`,
           {
             key:that.zcCode,
             username:that.u_account,
             password:that.u_pwd,
             ntpassword:that.u_qr_pwd
           },
           {

           }
        ).then((res)=>{
            console.log("注册请求成功：",res);
            that.$bus.$emit("toastEvent",res.data.msg,res.data.code);
            if(res.data.code==1){
              setTimeout(()=>{
                that.goPage('/login');
              },2500);
            }
        })
        .catch((err)=>{
          console.log("注册请求失败：",err);
        });
    }
  }
}
</script>

<style lang="less" scoped>
  @import "../assets/css/register.less";
</style>